<template>
  <div class="home-seach">
    <!-- 头部 -->
    <div class="head-seach">
      <div class="seach-input">
        <el-input
          placeholder="请输入搜索内容"
          v-model="keywords"
          @keydown.enter.native="getSearch"
          width="300px"
          style=""
        >
        </el-input>
        <!-- <el-button
          type="primary"
          icon="iconfont icon-search"
          @click="getSearch"
          width="20px"
        ></el-button> -->
      </div>
    </div>
    <!-- 导航 -->
    <el-tabs v-model="activeName" @tab-click="handler(activeName)">
      <el-tab-pane label="单曲" name="songs">
        <el-table :data="singerlist" style="width: 100%">
          <el-table-column prop="name" label="歌名" width="180">
            <template v-slot="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="歌手" name="singer"> </el-tab-pane>
      <el-tab-pane label="MV" name="mv"> </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getSearch } from "../../../network/api";
import { EventBus } from "../../../components/unite/EventBus";
export default {
  name: "Seach",
  // props: ['keywords'],
  data() {
    return {
      lisner: [
        {
          label: "单曲",
          name: "songs",
        },
      ],
      singerlist: [],
      keywords: "", //输入的内容
    };
  },
  mounted() {
    EventBus.$on("btnkeyword", (val) => {
      // console.log($bus);
      // console.log(val + "接收数据");
      this.keywords = val;
      // console.log(this.keywords + "传入的数据");
      this.getSearch(this.keywords);
    });
  },
  methods: {
    getSearch() {
      getSearch(this.keywords).then((res) => {
        // console.log(this.keywords + "接收数据");
        // console.log("加载数据");
        this.singerlist = res.data.result.songs;
        console.log(res);
      });
    },
    handler(e) {
      if (e == "lists") {
      } else if (e == "mv") {
      } else if (e == "songs") {
      }
    },
  },
  // created () {
  //   this.getSearchs()
  // },
};
</script>

<style lang="less">
.home-seach {
  height: 100%;
}
.head-seach {
  height: 70px;
  // background-color: red;
}
.seach-input {
  width: 320px;
  height: 50px;
  margin: 20px auto;
  display: flex;
  .el-input {
    float: left;
  }
  .el-button {
    float: right;
  }
}
</style>
